<template>
  <el-dialog
    top="30px"
    width="1000px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <div id="print-wrap">
      <h5 class="text-center">担保项目审批（评审）表</h5>
      <table class="table table-sm table-bordered vertical-align-middle text-center">
        <tbody>
          <tr>
            <td width="25%" colspan="3">借款人名称</td>
            <td colspan="9">{{ relatedData.customer_name || relatedData.customer_name }}</td>
          </tr>
          <tr>
            <td colspan="3">申请金额</td>
            <td width="25%" colspan="3">{{ relatedData.apply_funds }}万元</td>
            <td width="25%" colspan="3">申请期限</td>
            <td width="25%" colspan="3">{{ relatedData.load_years }}年</td>
          </tr>
          <tr>
            <td colspan="3">贷款实际用途</td>
            <td colspan="3">{{ relatedData.funds_use_dir }}</td>
            <td colspan="3">法定代表人</td>
            <td colspan="3">{{ relatedData.corp_name }}</td>
          </tr>
          <tr>
            <td colspan="3">贷款银行</td>
            <td colspan="3">{{ relatedData.bank_name }}</td>
            <td colspan="3">贷款利率（年）</td>
            <td class="report-input-td" colspan="3">
              <el-input
                placeholder="贷款利率（年）"
                v-input-number="{ min: 0, max: 100, fixed: 4 }"
                v-model="data.load_rate"
              >
                <span slot="append">%</span>
              </el-input>
            </td>
          </tr>
          <tr>
            <td colspan="3">审批金额</td>
            <td class="report-input-td" colspan="3">
              <el-input type="number" placeholder="审批金额" :min="0" v-model="data.res_funds">
                <span slot="append">万元</span>
              </el-input>
            </td>
            <td colspan="3">期限</td>
            <td class="report-input-td" colspan="3">
              <el-input
                type="number"
                placeholder="审批期限"
                :min="0"
                v-model="data.approval_load_years"
              >
                <span slot="append">年</span>
              </el-input>
            </td>
          </tr>
          <tr>
            <td colspan="3">担保费率</td>
            <td class="report-input-td" colspan="3">
              <el-input
                placeholder="担保费率"
                v-input-number="{ min: 0, max: 100, fixed: 4 }"
                v-model="data.gua_rate"
              >
                <span slot="append">%</span>
              </el-input>
            </td>
            <td colspan="3">评审费</td>
            <td class="report-input-td" colspan="3">
              <el-input
                placeholder="评审费"
                v-input-number="{ min: 0, fixed: 2 }"
                v-model="data.approval_fee"
              >
                <span slot="append">元</span>
              </el-input>
            </td>
          </tr>
          <tr>
            <td colspan="3">项目主审</td>
            <td colspan="3">{{ relatedData.res_a_name }}</td>
            <td colspan="3">项目辅审</td>
            <td colspan="3">{{ relatedData.res_b_name }}</td>
          </tr>
          <tr>
            <td colspan="3">反担保措施</td>
            <td colspan="9" class="report-input-td text-left">
              <textarea rows="5" class="form-control" v-model="data.counter_guarantee"></textarea>
            </td>
          </tr>
          <tr>
            <td colspan="3">项目基本介绍</td>
            <td colspan="9" class="report-input-td text-left">
              <textarea rows="5" class="form-control" v-model="data.project_des"></textarea>
            </td>
          </tr>
          <tr>
            <td colspan="3">项目经理意见</td>
            <td colspan="9" class="text-left text-option">
              <p style="text-indent: 2rem">
                {{ data.res_option || '-' }}
              </p>
              <div class="d-flex justify-content-between">
                <div>项目经理A、B角签字：{{ data.res_person }}</div>
                <div>{{ $utils.dateFormat(data.res_date, 'yyyy年MM月dd日') }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3">业务部意见</td>
            <td colspan="9" class="text-left text-option">
              <p style="text-indent: 2rem">
                {{ data.res_option_bus || '-' }}
              </p>
              <div class="d-flex justify-content-between">
                <div>签字：{{ data.res_person_bus }}</div>
                <div>{{ $utils.dateFormat(data.res_date_bus, 'yyyy年MM月dd日') }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3">风控部意见</td>
            <td colspan="9" class="text-left text-option">
              <p style="text-indent: 2rem">
                {{ data.res_option_risk || '-' }}
              </p>
              <div class="d-flex justify-content-between">
                <div>签字：{{ data.res_person_risk }}</div>
                <div>{{ $utils.dateFormat(data.res_date_risk, 'yyyy年MM月dd日') }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3">负责人意见</td>
            <td colspan="9" class="text-left text-option">
              <p style="text-indent: 2rem">
                {{ data.res_option_corp || '-' }}
              </p>
              <div class="d-flex justify-content-between">
                <div>签字：{{ data.res_person_corp }}</div>
                <div>{{ $utils.dateFormat(data.res_date_corp, 'yyyy年MM月dd日') }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3">市项目经理意见</td>
            <td
              colspan="9"
              :class="isResOption ? 'report-input-td' : ''"
              class="text-left text-option"
            >
              <textarea
                rows="5"
                class="form-control"
                placeholder="请输入意见"
                v-if="isResOption"
                v-model="data.city_res_option"
              ></textarea>
              <div v-else style="text-indent: 2rem">
                {{ data.city_res_option || '-' }}
              </div>
              <div class="d-flex justify-content-between">
                <div>签字：{{ data.city_res_person }}</div>
                <div>{{ $utils.dateFormat(data.city_res_date, 'yyyy年MM月dd日') }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3">项目评审委员会意见</td>
            <td
              colspan="9"
              :class="isApprovalRep ? 'report-input-td' : ''"
              class="text-left text-option"
            >
              <textarea
                rows="5"
                class="form-control"
                placeholder="请输入意见"
                v-if="isApprovalRep"
                v-model="data.city_res_option_corp"
              ></textarea>
              <div v-else style="text-indent: 2rem">
                {{ data.city_res_option_corp || '-' }}
              </div>
              <div class="d-flex justify-content-between">
                <div>签字：{{ data.city_res_person_corp }}</div>
                <div>{{ $utils.dateFormat(data.city_res_date_corp, 'yyyy年MM月dd日') }}</div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="text-center">
      <el-button class="btn-long" type="primary" @click="handlePass">通过</el-button>
      <el-button class="btn-long" type="danger" @click="showRejectDialog">不通过</el-button>
    </div>

    <el-dialog
      title="拒绝说明"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="refuseVisible"
      :before-close="refuseBeforeClose"
    >
      <div class="px-5">
        <el-input
          v-model="refuseReason"
          rows="5"
          placeholder="输入拒绝说明"
          type="textarea"
        ></el-input>
      </div>
      <div class="text-center mt-5">
        <el-button type="primary" class="btn-long" @click="handleReject">确定</el-button>
        <el-button class="btn-long" @click="refuseBeforeClose">取消</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { printHtml } from '@vimi/utils-tool'
import { enumGuaMethod } from '@/credit/plugins/enumTown'
export default {
  components: {},
  props: {
    visible: Boolean,
    relatedData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      enumGuaMethod,
      tableName: 'customer_related',
      data: {},
      buttonLoading: false,
      tableItem: {},

      refuseReason: '',
      refuseVisible: false,
    }
  },
  computed: {
    ...mapGetters(['userId', 'user']),
    isResOption() {
      return (
        (this.userId === this.relatedData.city_res_a ||
          this.userId === this.relatedData.city_res_b) &&
        +this.relatedData.city_res_status_corp === 0
      )
    },
    isApprovalRep() {
      return +this.user.isApprovalRep === 1 && +this.relatedData.city_res_status === 1
    },
  },
  watch: {
    relatedData: {
      handler: function () {
        this.getData()
      },
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      const params = { 'customer_related_id.eq': this.relatedData.customer_related_id }
      this.$api.getData(this.$serviceName, 'customer_approval_view', params).then(res => {
        this.data = (res && res.data && res.data[0]) || {}
        if (!this.relatedData.res_funds) {
          this.$set(this.data, 'res_funds', this.relatedData.apply_funds)
        } else {
          this.$set(this.data, 'res_funds', this.relatedData.res_funds)
        }
        this.$set(this.data, 'load_rate', this.relatedData.load_rate)
        this.$set(this.data, 'approval_load_years', this.relatedData.approval_load_years)
        this.$set(this.data, 'gua_rate', this.relatedData.gua_rate)
        this.$set(this.data, 'approval_fee', this.relatedData.approval_fee)
        this.$set(this.data, 'project_des', this.data.project_des || this.relatedData.project_des)
        this.$set(
          this.data,
          'counter_guarantee',
          this.data.counter_guarantee || this.relatedData.counter_guarantee
        )
        if (this.isResOption) {
          this.data.city_res_date = this.$utils.dateFormat(new Date())
          this.data.city_res_person = this.user.realName
        }
        if (this.isApprovalRep) {
          this.data.city_res_date_corp = this.$utils.dateFormat(new Date())
          this.data.city_res_person_corp = this.user.realName
        }
      })
    },
    handlePass() {
      if (!this.validator()) {
        return
      }
      const data = this.setStatus(1)
      data.project_status = 1
      this.$utils
        .msgbox({
          message: `确定通过?`,
          type: 'info',
          beforeClose: () =>
            this.$api.updateData(
              this.$serviceName,
              this.tableName,
              this.relatedData.customer_related_id,
              data
            ),
        })
        .then(() => {
          this.$message.success('操作成功！')
          this.$emit('success', false)
          this.beforeClose()
        })
        .catch(() => this.$message.error(`操作失败，请重试！`))
    },
    setStatus(num, message) {
      const data = {}
      if (this.isResOption) {
        data.city_res_status = num
        data.city_res_date = this.$utils.dateFormat(new Date())
        data.city_res_person = this.user.realName
        data.city_res_option = message || this.data.city_res_option
      }
      if (this.isApprovalRep) {
        data.city_res_status_bus = 1
        data.city_res_status_risk = 1
        data.city_res_status_corp = num
        data.city_res_date_corp = this.$utils.dateFormat(new Date())
        data.city_res_person_corp = this.user.realName
        data.city_res_option_corp = message || this.data.city_res_option_corp
      }
      data.load_rate = this.data.load_rate
      data.res_funds = this.data.res_funds
      data.approval_load_years = this.data.approval_load_years
      data.gua_rate = this.data.gua_rate
      data.approval_fee = this.data.approval_fee
      data.project_des = this.data.project_des
      data.counter_guarantee = this.data.counter_guarantee
      return data
    },
    showRejectDialog() {
      this.refuseVisible = true
    },
    handleReject() {
      if (!this.refuseReason) {
        return this.$message.error('请输入拒绝理由')
      }

      const data = this.setStatus(2, this.refuseReason)
      this.$utils
        .msgbox({
          message: `确定不通过?`,
          type: 'error',
          beforeClose: () =>
            this.$api.updateData(
              this.$serviceName,
              this.tableName,
              this.relatedData.customer_related_id,
              data
            ),
        })
        .then(() => {
          this.$message.success('操作成功！')
          this.$emit('success', false)
          this.refuseBeforeClose()
          this.beforeClose()
        })
        .catch(() => this.$message.error(`操作失败，请重试！`))
    },
    validator() {
      if (!this.data.load_rate) {
        this.$message.warning('请输入基准利率！')
        return false
      }
      if (!this.data.res_funds) {
        this.$message.error('请输入审批金额！')
        return false
      }
      if (!this.data.approval_load_years) {
        this.$message.error('请输入期限！')
        return false
      }
      if (!this.data.gua_rate) {
        this.$message.error('请输入担保费率！')
        return false
      }
      // if (!this.data.approval_fee) {
      //   this.$message.error('请输入评审费！')
      //   return false
      // }
      if (!this.data.project_des) {
        this.$message.error('请输入项目基本介绍！')
        return false
      }
      return true
    },
    refuseBeforeClose() {
      this.refuseReason = ''
      this.refuseVisible = false
    },
    handlePrint() {
      printHtml(
        document.getElementById('print-wrap').innerHTML,
        `
        .vertical-align-middle td {vertical-align: middle;}
      `
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.bg-gray {
  background-color: $gray-200;
}
.text-option {
  padding: 10px;
}
</style>
